<template>
  <div class="server-status">
    <el-card class="status-card">
      <div class="status-content">
        <div class="status-icon">
          <el-icon :size="40" :color="serverStatus.online ? '#4CAF50' : '#f44336'">
            <Monitor v-if="serverStatus.online" />
            <Warning v-else />
          </el-icon>
        </div>
        
        <div class="status-info">
          <h3>服务器状态</h3>
          <div class="status-details">
            <div class="status-item">
              <span class="label">状态:</span>
              <span class="value" :class="{ 'online': serverStatus.online, 'offline': !serverStatus.online }">
                {{ serverStatus.online ? '在线' : '离线' }}
              </span>
            </div>
            
            <div class="status-item">
              <span class="label">在线人数:</span>
              <span class="value">{{ serverStatus.playerCount }}/{{ serverStatus.maxPlayers }}</span>
            </div>
            
            <div class="status-item">
              <span class="label">服务器IP:</span>
              <span class="value">mc.kbblet.cn:25565</span>
            </div>
          </div>
        </div>
        
        <div class="status-actions">
          <el-button 
            type="primary" 
            size="large"
            @click="joinServer"
            :disabled="!serverStatus.online"
            :loading="loading"
          >
            {{ serverStatus.online ? '加入服务器' : '服务器离线' }}
          </el-button>
          
          <el-button 
            type="info" 
            size="large"
            @click="refreshStatus"
            :loading="loading"
          >
            刷新状态
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { Monitor, Warning } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getServerStatus } from '../api/serverApi'

export default {
  name: 'ServerStatus',
  components: {
    Monitor,
    Warning
  },
  setup() {
    const serverStatus = ref({
      online: false,
      playerCount: 0,
      maxPlayers: 50,
      ping: 0,
      version: '1.21.4'
    })
    
    const loading = ref(false)
    let refreshInterval = null

    const fetchServerStatus = async () => {
      loading.value = true
      try {
        const status = await getServerStatus()
        serverStatus.value = status
      } catch (error) {
        console.error('获取服务器状态失败:', error)
        ElMessage.error('获取服务器状态失败')
      } finally {
        loading.value = false
      }
    }

    const refreshStatus = () => {
      fetchServerStatus()
    }

    const joinServer = () => {
      if (serverStatus.value.online) {
        navigator.clipboard.writeText('mc.kbblet.cn:25565')
        ElMessage.success('服务器IP已复制到剪贴板！')
      }
    }

    onMounted(() => {
      fetchServerStatus()
      // 每30秒自动刷新
      refreshInterval = setInterval(fetchServerStatus, 30000)
    })

    onUnmounted(() => {
      if (refreshInterval) {
        clearInterval(refreshInterval)
      }
    })

    return {
      serverStatus,
      loading,
      refreshStatus,
      joinServer
    }
  }
}
</script>

<style scoped>
.server-status {
  margin: 20px 0;
}

.status-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.status-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.status-icon {
  flex-shrink: 0;
}

.status-info {
  flex: 1;
}

.status-info h3 {
  margin: 0 0 15px 0;
  font-size: 1.5rem;
  color: white;
}

.status-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.label {
  font-weight: bold;
  min-width: 80px;
}

.value {
  font-size: 1.1rem;
}

.value.online {
  color: #4CAF50;
  font-weight: bold;
}

.value.offline {
  color: #f44336;
  font-weight: bold;
}

.status-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .status-content {
    flex-direction: column;
    text-align: center;
  }
  
  .status-actions {
    flex-direction: row;
    justify-content: center;
  }
  
  .status-item {
    justify-content: center;
  }
}
</style> 